import {Card, Button, Modal, Form, Input, Popconfirm, message} from "antd";
import './Bank.less';
import {useEffect, useState} from "react";
// import Cookies from 'js-cookie';
import http from "../../utils/http";
import {QuestionCircleOutlined} from "@ant-design/icons";
const Bank = (props) => {
    let myBank = props.bank;
    let [bankBind,setBankBind] = useState(0)
    let [visible,changeVisible] = useState(false);
    let [codeTimer,setCodeTimer] = useState(30);
    let [codeText,setCodeText] = useState('获取验证码');
    let [codeBtnDisabled,setCodeBtnDisabled] = useState(false);
    let [code,setCode] = useState({});
    let [btnText,setBtnText] = useState('启用');
    let [newBank,setMyNewBank] = useState({
        accountName:'',
        bankAccount:'',
        cardId:'',
        phone:'',
        id: 1,
        verification:''
    });
    let timer = codeTimer;
    const [form] = Form.useForm();
    const [formLayout, setFormLayout] = useState('horizontal');

    useEffect(()=>{
        setBankBind(props.bind);
        // if(Cookies.get('code')){
            // let code1 = JSON.parse(Cookies.get('code'));
            // setCode(code1)
            console.log(code)
        // }
        setBtnText(props.bind ? '不启用':'启用')
    },[])

    form.setFieldsValue(newBank);

    const formItemLayout = formLayout === 'horizontal' ? { labelCol: { span: 4, }, wrapperCol: { pan: 14, }, } : null;

    const showModal = () => {
        changeVisible(true);
    };

    const hideModal = () => {
        changeVisible(false);
    };
    const addSubmit = () => {
        newBank.id = 1;
        http({
            url:'api/financeController/bankCardBind',
            method:'post',
            data:newBank
        }).then((res)=>{
            if (res.code == 200){
                message.success('绑定银行卡成功');
                changeVisible(false);
            }else {
                message.warning(res.msg);
            }
            console.log(res)
        }).catch(err=>{
            message.error('服务器错误，请稍后再试~');
        })
    };
    const unbind = () => {
        myBank.id = 1;
        http({
            url:'api/financeController/bankCardBindUpdate',
            method:'post',
            data:myBank
        }).then((res)=>{
            if (bankBind){
                setBankBind(0);
            }else {
                setBankBind(1);
            }
        })
    };
    const setNewBank = (ev)=>{
        switch (ev.target.name){
            case 'cardId':
                newBank.cardId = ev.target.value;
                break;
            case 'accountName':
                newBank.accountName = ev.target.value;
                break;
            case 'bankAccount':
                newBank.bankAccount = ev.target.value;
                break;
            case 'phone':
                newBank.phone = ev.target.value;
                break;
            case 'verification':
                newBank.verification = ev.target.value;
                break;
        }
    }

    const getCode = () => {
        if (newBank.phone){
            if (timer == 30){
                console.log(newBank)
                setMyNewBank(newBank)
                form.setFieldsValue(newBank);
                http({
                    url:'api/smsController/smsSend',
                    method:'post',
                    data:{phone:parseInt(newBank.phone)}
                }).then((res)=>{
                    if(res.code == 1){
                        let timeOut = 10 * 60;
                        let expires = new Date(new Date() * 1 + timeOut * 1000); //10分钟后
                        let codeData = JSON.stringify({phone:parseInt(newBank.phone),shuaikang:res.shuaikang});
                        // Cookies.set('code',codeData, { expires: expires })
                        newBank.verification = res.shuaikang;
                    }else if (res.code == 12004){
                        // let code1 = JSON.parse(Cookies.get('code'));
                        // setCode(code1)
                        newBank.verification = code.shuaikang;
                    }
                })
            }
            if(timer==0){
                setCodeText('获取验证码');
                setCodeBtnDisabled(false);
                setCodeTimer(30);
            }else{
                setCodeBtnDisabled(true);
                timer--;
                setCodeTimer(timer);
                setCodeText(timer+'秒后重新获取');
                setTimeout(()=>{
                    getCode();
                },1000);
            }
        }else {
            message.warning('请输入电话号码');
        }
    }
    if(props.bank){
        return (
            <div style={{marginLeft:'20px',marginBottom:'20px'}}>
                <Card className='bank-card' style={bankBind ? {background:'#F5F7FA'}:{background: '#ffeeee'}}>
                    <div className='bank-top'>
                        <span>提现绑定账户</span>
                        <Popconfirm
                            title="确定要更换启用状态吗？"
                            onConfirm={unbind.bind(this)}
                            icon={<QuestionCircleOutlined style={{color:'orange'}} />}
                            okText={btnText}
                            cancelText="取消"
                        >
                            <Button style={{fontSize:'10px'}} type="link">更换状态</Button>
                        </Popconfirm>
                    </div>
                    <div className='bank-name'>{myBank.bankAccount}</div>
                </Card>
            </div>
        )
    }else{
        return (
            <div style={{marginLeft:'20px',marginBottom:'20px'}}>
                <Card className='bank-card' style={{background:'#e0ffe0'}}>
                    <div className='bank-top'><span>提现绑定账户</span><Button style={{fontSize:'10px'}} type="link" onClick={showModal}>立即绑定</Button></div>
                    <div className='bank-name'>暂未绑定</div>
                </Card>
                <Modal
                    title="绑定银行卡"
                    visible={visible}
                    onOk={addSubmit.bind(this)}
                    onCancel={hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                    <Form
                        {...formItemLayout}
                        layout={formLayout}
                        form={form}
                        initialValues={newBank}
                    >
                        <Form.Item
                            label="账号"
                            name={'cardId'}
                            rules={[{ required: true, message: '请输入账号' },{pattern: /^([1-9]{1})(\d{14}|\d{18})$/, message:'请输入正确的账号'}]}>
                            <Input type={'number'} placeholder="请填写提现收款账号" name={'cardId'} value={newBank.cardId} onChange={setNewBank.bind(this)} />
                        </Form.Item>
                        <Form.Item
                            label="户名"
                            name={'accountName'}
                            rules={[{ required: true, message: '请输入户名' },{pattern:/^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,20})$/,message:'请输入正确的姓名'}]}>
                            <Input placeholder="请填写提现收款户名" name={'accountName'} value={newBank.accountName} onChange={setNewBank.bind(this)} />
                        </Form.Item>
                        <Form.Item
                            label="开户银行"
                            name={'bankAccount'}
                            rules={[{ required: true, message: '请输入开户银行' },{pattern:/^([\u4e00-\u9fa5]{1,20})$/,message:'请输入正确的开户银行'}]}>
                            <Input placeholder="请填写开户行名称" name={'bankAccount'} value={newBank.bankAccount} onChange={setNewBank.bind(this)} />
                        </Form.Item>
                        <Form.Item
                            label="手机号码"
                            name={'phone'}
                            rules={[{ required: true, message: '请输入手机号码' },{pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,message:'请输入正确的手机号码'}]}>
                            <Input
                                placeholder="请输入手机号码"
                                name={'phone'}
                                value={newBank.phone}
                                onChange={setNewBank.bind(this)}
                                suffix={<Button type={'link'} disabled={codeBtnDisabled} onClick={getCode.bind(this)}>{codeText}</Button>}
                            />
                        </Form.Item>
                        <Form.Item
                            label="验证码"
                            name={'verification'}
                            rules={[{ required: true, message: '请输入验证码' }]}>
                            <Input maxLength={6} placeholder="请输入验证码" name={'verification'} value={newBank.verification} onChange={setNewBank.bind(this)} />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}

export default Bank;